<template>
    <div class="box">
        <h3>图片(视频、音频)资源编译问题</h3>
        <p>1.参与编译的资源加载</p>
        <ul>
            <li>
                img 的静态 src 加载
                <img src="@/index/assets/12.png" alt="" srcset="">
                <img class="tip" src="@/index/assets/dome01.jpg" alt="" srcset="">
            </li>
            <li>
                单文件组件的 style标签中的 样式图片加载
                <img src="@/index/assets/18.png" alt="" srcset="">
                <div class="build-img"></div>
            </li>
            <li>
                以模块化方式加载资源文件
                <img src="@/index/assets/16.png" alt="" srcset="">
                <img src="@/index/assets/17.png" alt="" srcset="">
            </li>
        </ul>
        <p>2.不参与编译的资源加载和解决方案</p>
        <ul>
            <li>
                以 http|https|网络路径 协议定义的绝对路径图片
                <img src="@/index/assets/19.png" alt="" srcset="">
                <img class="tip" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
            </li>
            <li>
                单文件组件中，标签 行内样式 中加载的图片
                <div class="build-img2" style="background-image: url('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png');"></div>
                因为行内样式定义的图片路径未被vue进行路由编译转换，所以图片无法正常显示
                <img src="@/index/assets/20.png" alt="" srcset="">
                <div class="build-img2" style="background-image: url('../../assets/dome01.jpg')"></div>
                解决方案
                <ol>
                    <li>图片直接存放于public目录下【除非特殊情况，一般不用】
                        <div class="build-img2" style="background-image: url('../../../../public/img/111.jpg')"></div>
                        【必须以index.html 为参考文件定义路径】
                        <div class="build-img2" style="background-image: url('/img/111.jpg')"></div>
                        【采用process全局变量补充服务器路径】
                        <div class="build-img2" :style="`background-image: url('${baseUrl}img/111.jpg')`"></div>
                    </li>
                    <li>
                        在vue模板语法中强行使用 node require 函数文件资源文件的模块化加载
                        <div class="build-img2" :style=" 'background-image: url('+ require('@/index/assets/dome01.jpg') +')' "></div>
                        在vue的数据仓库中定义并加载 资源文件，触发资源文件的模块加载
                        <div class="build-img2" :style="`background-image: url('${img}')`"></div>
                    </li>
                </ol>
            </li>
            <li>
                单文件组件中以vue语法方式绑定的变量，变量取值相对路径图片时【前后台协调】
                <p>imgPath:{{ imgPath }}</p>
                <img class="tip" :src="imgPath" alt="" srcset="">
                <input type="button" value="为imgPath赋值" @click=" imgPath='../../assets/dome01.jpg' ">
            </li>
        </ul>
        <p>3.项目开发中通过 @ 关键字指定编译地址的路径指向【@=src】</p>
    </div>
</template>
<script>
import dome01 from "@/index/assets/dome01.jpg";
export default {
    data() {
        return {
            baseUrl: process.env.BASE_URL,
            img:dome01,
            imgPath:""
        }
    },
}
</script>
<style>
.build-img{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background-image: url("../../assets/dome01.jpg");
    background-size: 100% 100%;
}
.build-img2{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background-size: 100% 100%;
}

</style>